<template>
	<view class="container">
		<tab-bar ref="tabBar"  :tabs="tabs" v-model="tabIndex"></tab-bar>
		<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
			<swiper-item v-for="(tab,i) in tabs" :key="i">
				<mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs"></mescroll-item>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import tabBar from  '@/components/common/tab-bar.vue'
	import MescrollItem from "./components/article-swiper-item.vue"
	import courseApi  from '@/api/course.js'
	export default {
		components:{
			tabBar,
			MescrollItem
		},
		data() {
			return {
				height:'400px',//需要固定得swiper 高度
				tabs:[],
				tabIndex:0,//当前tab得下标 
				
			}
		},
		// 监听原生标题栏搜索输入框点击事件
		onNavigationBarSearchInputClicked() {
			//点击导航搜索框进入搜索页
			this.navTo('/pages/search/search')
		},
		onLoad() {
			// 需要固定swiper的高度
			this.height = uni.getSystemInfoSync().windowHeight + 'px'
			
			// 查询分类
			this.loadData()
		},
		
		methods: {
			//轮播菜单
			swiperChange(e){
				this.tabIndex =  e.detail.current
				this.$refs.tabBar.changeTab(this.tabIndex)  //重新调用左右滑动的方法tabBar 组件
			},
			
		async	loadData(){
			uni.showLoading({  
				title:'加载中',
			})
			const  {data }	 =  await  courseApi.getCategoryList()
				data.unshift({id:null,name:'推荐'})  //添加一个对象unshift
				this.tabs = data 
				uni.hideLoading()  //隐藏加载中
			}
			
		}
	}
</script>

<style>
	page, .container{
		height: 100%;
		overflow: hidden;
	}
</style>
